<template>
	<view class="aignBox">
		<view class="teamTitle">我的签约团队</view>
		<view class="card-box">
			<image :src="contractStore.contractDetail?.teamId?.avatar"></image>
			<text style="font-size: 18px;">{{contractStore.contractDetail?.teamId?.name}}</text>
			<view class="team-leader">
				<text>团队长:{{contractStore.contractDetail?.organizationId?.contacts}}</text>
				<text>签约医生：{{contractStore.contractDetail?.doctorId.name}}</text>
			</view>
			<button @click="accService()">申请服务</button>
		</view>
	</view>
	<view class="serviceMsg">
		<view class="teamTitle">服务提醒</view>
		<view class="msgBox">
			<view class="iconBox">
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2597.png">
				</image>
			</view>
			<view class="msgTextBox">
				<text>服务申请进度提醒</text>
				<text class="small-text">医生已经通过了您的签约申请，查看…</text>
				<view class="redCurret">
					<image style="width: 16rpx;height: 16rpx;margin-right: 20rpx;margin-bottom: 2rpx;"
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1462.png"
						mode=""></image>
					<image style="width: 14rpx;height: 24rpx;"
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useContractStore
	} from '../../store/contract';


	// 签约团队
	const contractStore = useContractStore();
	// console.log(contractStore.contractDetail?.organizationId?.image);





	const accService = () => {
		uni.navigateTo({
			url: '/pages/request-service/request-service'
		})
	}
</script>

<style scoped lang="scss">
	.redCurret {
		position: absolute;
		right: -58rpx;
		bottom: 63rpx;
	}

	.msgTextBox {
		display: flex;
		flex-direction: column;
		position: relative;
		margin-bottom: 20rpx;

		text:first-child {
			font-size: 17px;
			margin-bottom: 15rpx;
			margin-top: 50rpx;
		}

		.small-text {
			color: #999;
			font-size: 12px;

		}
	}

	.iconBox {
		width: 88rpx;
		height: 88rpx;
		background: rgba(253, 219, 120, 0.2);
		border-radius: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 40rpx;
		margin-top: 50rpx;
		margin-right: 35rpx;

		image {
			width: 38rpx;
			height: 36rpx;

		}
	}

	.serviceMsg {
		padding: 0 40rpx;

		.msgBox {
			background-color: #fff;
			height: 176rpx;
			border: 1px solid #f0f0f0;
			border-radius: 16px;
			display: flex;

		}
	}

	.team-leader {
		margin-top: 30rpx;

		text {
			color: #999;
			font-size: 14px;
		}

		text:last-child {
			margin-left: 20rpx;
		}
	}

	.card-box {
		height: 586rpx;
		border: 1px solid #f0f0f0;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		box-shadow: 0px 1px 1px 1px #eee;

		button {
			margin-top: 40rpx;
			font-size: 14px;
			color: #fff;
			background: #2984f8;
			width: 200rpx;
			height: 80rpx;

		}

		image {
			width: 220rpx;
			height: 220rpx;
			margin-top: 40rpx;
			margin-bottom: 50rpx;
		}
	}

	.teamTitle {
		font-size: 18px;
		padding-top: 50rpx;
		padding-bottom: 30rpx;

	}

	.aignBox {
		/* width: 750rpx; */
		// padding-top:40rpx ;
		height: 774rpx;
		background: #fff;
		padding: 0 40rpx;
	}
</style>